<template>
	<van-cell-group>
		<!--
      要求的数组项
        item: {
          id,
          name, // 歌曲名
          maxBr, // 最大音质
          alias, // 别名
          artists, // 歌手数组
          albumName, // 专辑名
        }
     -->
		<van-cell v-for="(item, idx) in list" :key="item.id" center>
			<template #icon>
				<div
					v-if="mode === 'rank'"
					:class="{ icon: true, top: idx < 3 }"
				>
					{{ 9 > idx ? "0" + (idx + 1) : idx + 1 }}
				</div>
				<div v-else-if="mode === 'normal'" class="icon">
					{{ idx + 1 }}
				</div>
			</template>
			<template #label>
				<span class="sq" v-if="item.maxBr > 320000" />
				{{ getLabel(item) }}
			</template>
			<template #title>
				<div class="song-info">
					<span>{{ item.name }}</span>
					<span v-if="item.alias" class="song-title">
						({{ item.alias }})
					</span>
				</div>
			</template>
			<template #right-icon>
				<van-icon size="20" name="play-circle-o" />
			</template>
		</van-cell>
	</van-cell-group>
</template>

<script>
export default {
	props: {
		mode: {
			type: String,
			default: "default",
		},
		list: {
			type: Array,
			default: () => [],
		},
		showIdx: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		getLabel(item) {
			return `${item.artists.map((item) => item.name).join(" / ")} - ${
				item.albumName
			}`;
		},
		getTitle(item) {
			if (item.alias) {
				return `${item.name} (${item.alias})`;
			} else {
				return item.name;
			}
		},
	},
};
</script>

<style scoped>
.song-title {
	color: #ccc;
}
.song-info {
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	width: calc(200% - 42px);
}
.sq {
	background-image: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
	background-size: 166px 97px;
	display: inline-block;
	width: 12px;
	height: 8px;
	text-shadow: 0px 0px 1px #000;
}
.icon {
	margin-right: 12px;
}
.top {
	color: #d43c33;
}
</style>